

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>后台主页一</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../utils/layui/css/layui.css">
  <link href="../static/css/style.min.css" rel="stylesheet">
</head>
<body>
  
  <div class="layui-fluid" id="view">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md8">
        <div class="layui-row layui-col-space15">
			
          <div class="layui-col-md12">
            <div class="layui-card">
              <div class="layui-card-header">数据表使用情况</div>
              <div class="layui-card-body">
                
                <div id="main" style="width: 100%;height:400px;"></div>
                
              </div>
            </div>
            <div class="layui-card">
              <div class="layui-tab layui-tab-brief layadmin-latestData">
                <ul class="layui-tab-title">
                  <li class="layui-this">服务器信息</li>
                </ul>
                <div class="layui-tab-content">
                  <div class="layui-tab-item layui-show">
                    {{serve_conf(d.serve_conf)}}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="layui-col-md4">
        <div class="layui-card">
          <div class="layui-card-header">版本信息</div>
          <div class="layui-card-body layui-text">
            <table class="layui-table">
              <colgroup>
                <col width="100">
                <col>
              </colgroup>
              <tbody>
                <tr>
                  <td>版本</td>
                  <td>v2.0.0
                 </td>
                </tr>
                <tr>
                  <td>主要特色</td>
                  <td>零门槛 / 响应式 / 清爽 / 极简</td>
                </tr>
				<tr>
				  <td>作者</td>
				  <td>张启全</td>
				</tr>
              </tbody>
            </table>
          </div>
        </div>
        
		<div class="layui-card">
		  <div class="layui-card-header">数据库信息</div>
		  <div class="layui-card-body layui-text">
			  {{main_mysql_var(d.var_timeout)}}
		  </div>
		</div>
		
      </div>
      
    </div>
  </div>
<script src="/admin/utils/layui/layui.js" charset="utf-8"></script>
<script src="/admin/utils/layui/config.js" charset="utf-8"></script>
<script>
	
	window.serve_conf = function(arr){
		var tbhtml = '<table class="layui-table">\
		  <thead>\
			<tr>\
				<th width="30%">配置</th>\
				<th>值</th>\
			</tr>\
		  </thead>\
		  <tbody>';
		tbhtml += '<tr><td>服务器地址</td><td>'+arr.http_host+'</td></tr>';
		tbhtml += '<tr><td>数据库地址</td><td>'+arr.db_host+'</td></tr>';
		tbhtml += '<tr><td>系统类型</td><td>'+arr.os+'</td></tr>';
		tbhtml += '<tr><td>最大内存分配</td><td>'+arr.memory_limit+'</td></tr>';
		tbhtml += '<tr><td>上传临时目录</td><td>'+arr.upload_tmp_dir+'</td></tr>';
		tbhtml += '<tr><td>最大上传文件大小</td><td>'+arr.upload_max_filesize+'</td></tr>';
		tbhtml += '<tr><td>最大请求</td><td>'+arr.post_max_size+'</td></tr>';
		tbhtml += '<tr><td>最大执行时间</td><td>'+arr.max_execution_time+'</td></tr>';
		tbhtml += '<tr><td>session有效时间</td><td>'+arr.gc_maxlifetime+'</td></tr>';
		tbhtml += '<tr><td>服务器时间</td><td>'+arr.time+'</td></tr>';
		tbhtml += '</tbody></table>';
		return tbhtml;
	}
	
	window.main_mysql_var = function(arr){
		var tbhtml = '<table class="layui-table">\
		  <thead>\
			<tr>\
				<th width="30%">时间配置</th>\
				<th>值</th>\
			</tr>\
		  </thead>\
		  <tbody>';
		for(i in arr){
			tbhtml += '<tr>\
					  <td>'+arr[i]['Variable_name']+'</td>\
					  <td>'+arr[i]['Value']+'</td>\
				  </tr>';
		}
		tbhtml += '</tbody></table>';
		return tbhtml;
	}
	layui.use(['layer','view', 'echarts'], function () {
		let view = layui.view;
		var echarts = layui.echarts;
		view.init(baseApi.mainUrl, function(res){
			var tableList = [];
			var rowList = [];
			var rowSize = [];
			var dataLength = [];
			var indexLength = [];
			for(i in res.data.tabels_status){
				var item = res.data.tabels_status[i];
				array_push(tableList, item['Comment'] ? item['Comment'] : item['Name']);
				array_push(rowList, item['Rows']);
				array_push(dataLength, item['Data_length'] ? item['Data_length']  / 1024 / 1024 : 0);
				array_push(indexLength, item['Index_length'] ? item['Index_length'] / 1024 / 1024 : 0);
			}
			var option = {
				tooltip: {
					trigger: "axis",
					axisPointer: {
						// 坐标轴指示器，坐标轴触发有效
						type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				grid: {
					left: "1%",
					right: "1%",
					bottom: "3%",
					containLabel: true
				},
				xAxis: [{
					type: "category",
					data: tableList
				}],
				yAxis: [{
					type: "value"
				}],
				series: [{
						name: "行数",
						type: "bar",
	
						barGap: "0", // 柱图间距
						itemStyle: {
							normal: {
								color: "#409DFF"
							}
						},
						data: rowList
					},
					{
						name: "数据大小/MB",
						type: "bar",
						barGap: "0", // 柱图间距
						itemStyle: {
							normal: {
								color: "#FF70A3"
							}
						},
						data: dataLength
					}
				]
			};
			var myChart = echarts.init(document.getElementById('main'));
			myChart.setOption(option);
			
		});
	});
</script>
</body>
</html>

